<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= web_title%></title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/ruoling/css/ruoling-ui.css">
    <link rel="stylesheet" href="/ruoling/css/ruoling-load.css">
</head>
<style>
    /* chrome */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    /* 火狐浏览器 */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    .Yiling-flexd{position: fixed;bottom: 0;background-color: #f0f4f7;width: 100%;border-top: 1px #c7c7c7 solid;text-align: right;}
    .Yiling-padding{padding: 20px 15px;}
    .Yiling-border-blue{border: 1px solid #0064b6;}
    .Yiling-border-block{border: 1px solid #000;}
    .Yiling-Body{background-color: #ffffff;}
    .Yiling-padding-bottom{padding-bottom: 15px;}
    .Yiling-seach{display: inline-block;height: 36px;border: 1px solid #e5e6e7;vertical-align: top;line-height: 36px;width: 36px;text-align: center;margin-left: -6px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;cursor: pointer;}
    .Yiling-tree-border{border: 1px solid #e5e6e7;border-radius: 4px;padding: 2px;overflow-y: auto;height: 250px;}
</style>
<body class="Yiling-Body">
<form class="layui-form" action="">
    <div style="padding:20px 20px;">
        <div class="Yiling-padding-bottom">
            <label class="layui-form-label" style="width: 190px;">登录账号：</label>
            <div style="width: 300px;display: inline-block;">
                <input type="text" name="sys_loginname" value="<%= user.sys_loginname%>" required lay-verify="required" placeholder="请输入登录账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="Yiling-padding-bottom">
            <label class="layui-form-label" style="width: 190px;">用户名称：</label>
            <div style="width: 300px;display: inline-block;">
                <input type="text" name="sys_name" value="<%= user.sys_name%>" required lay-verify="required" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="ID" value="<%= user.ID%>"  />
        <div class="Yiling-padding-bottom">
            <label class="layui-form-label" style="width: 190px;">角色：</label>
            <div style="width: 300px;display: inline-block;line-height:38px" id="rolecheckbox">
                <!--<input type="checkbox" name="rolename1" lay-skin="primary"  lay-filter="rolenamefilter" title="写作" value="写作">
                <input type="checkbox" name="rolename2" lay-skin="primary"  lay-filter="rolenamefilter" title="阅读" value="阅读">
                <input type="checkbox" name="rolename3" lay-skin="primary"  lay-filter="rolenamefilter" title="阅读1" value="阅读1">
                <input type="checkbox" name="rolename4" lay-skin="primary"  lay-filter="rolenamefilter" title="阅读2" value="阅读2">
                -->
            </div>
        </div>
    </div>
    <div class="Yiling-flexd">
        <div class="Yiling-padding">
            <button type="button"  lay-submit lay-filter="formDemo"  class="layui-btn layui-btn-sm Yliing-blue Yiling-border-blue">确认</button>
            <button type="button" id="Yiling-close" class="layui-btn layui-btn-sm layui-btn-primary  Yiling-border-block">关闭</button>
        </div>
    </div>
</form>
</body>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm Yliing-blue" lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>新增</button>
        <button class="layui-btn layui-btn-sm Yiling-cyan" lay-event="delete"> <i class="layui-icon layui-icon-edit"></i>修改</button>
        <button class="layui-btn layui-btn-sm Yliing-blue" lay-event="Barexpansion"> <i class="layui-icon layui-icon-add-1"></i>展开/折叠</button>
    </div>
</script>
<!-- 操作 -->
<script type="text/html" id="BarOper">
    <button class="layui-btn layui-btn-xs Yliing-blue" lay-event="tooledit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
    <button class="layui-btn layui-btn-xs Yiling-Red" lay-event="tooldel"><i class="layui-icon layui-icon-close"></i>删除</button>
</script>

</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>

    layui.config({
        base:""
    }).extend({
        Yiling:"/libs/ruoling-request/js/Yiling-Request"
    }).use(["table", "layer", "jquery", "form", 'Yiling'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let request = layui.Yiling.YI_Ajax;

        //数据默认渲染
        function CheckbonxInfo() {
            let rolecheckbox = document.querySelector("#rolecheckbox");
            let html = "";
            new request().SetUrl("/admin/v1/api/role/rolecheckarr").SetType("POST").Init(function (result) {
                let data = result.Result
                let editArr = "<%= list%>" != "" ? "<%= list%>".split(",") : "";
                    if(editArr == ""){
                        for (let i = 0; i < data.length; i++) {
                            html += '<input type="checkbox" lay-skin="primary"  lay-filter="rolenamefilter" title="' + data[i].sys_role_name+'" value="'+data[i].ID+'">'
                        }
                    }else{
                        for (let i = 0; i < data.length; i++) {
                            let flog = true;
                            for(let n = 0;n<editArr.length;n++){
                                if(data[i].ID == parseInt(editArr[n])){
                                    flog = true;
                                    break;
                                }else{
                                    flog = false;
                                }
                            }
                            if(flog){
                                html += '<input type="checkbox" lay-skin="primary"  lay-filter="rolenamefilter" title="' + data[i].sys_role_name+'" value="'+data[i].ID+'" checked>'
                            }else {
                                html += '<input type="checkbox" lay-skin="primary"  lay-filter="rolenamefilter" title="' + data[i].sys_role_name+'" value="'+data[i].ID+'">'
                            }
                        }
                    }
                rolecheckbox.innerHTML = html;
                form.render('checkbox');
            });
        };
        CheckbonxInfo();
        //实现数据选中
        let RoleName_Arr = "<%= list%>" != "" ? "<%= list%>".split(",") : [];
        form.on("checkbox(rolenamefilter)", function (data) {

            let flog = data.elem.checked;
            let value = data.value;
            if (flog) {
                //选中
                RoleName_Arr.push(value);
            } else {
                //取消选择
                RoleName_Arr = RoleName_Arr.filter(ele => {

                    return ele != value;
                });
            }
        });

        //监听提交
        form.on('submit(formDemo)', function (data) {
            let info = data.field;

            if(RoleName_Arr.length == 0){
                layer.msg("请选择角色");
                return false;
            }
            layer.confirm('是否确认修改', { icon: 3, title: '提示' }, function (index) {
                let obj={
                    sys_loginname:data.field.sys_loginname,
                    sys_name:data.field.sys_name,
                    rolearr_id:RoleName_Arr,
                    ID:data.field.ID
                }
                new request().SetUrl("/admin/v1/api/system/user/edit").SetType("POST").SetDataPara(obj).Alone().Init(function (result) {
                    parent.window.LoadTable();
                    ifaremClose();
                });
                layer.close(index);
            });
            return false;
        });

        // 关闭按钮事件
        let Yiling_close = document.querySelector("#Yiling-close");
        Yiling_close.addEventListener("click", function () {
            ifaremClose();
        });
        function ifaremClose() {
            //获取特定iframe层的索引
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        };
    })
</script>
<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.createtime,"yyyy年MM月dd日 HH:mm:ss")}}
</script>

<script>
    function FormDate(d, str) {
        return layui.util.toDateString(d, str)
    }
</script>